<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>西施</li>
        <li>貂蝉</li>
        <li>昭君</li>
        <li>凤姐</li>
        <li>芙蓉姐姐</li>
    </ul>
    <button>按钮</button>
    <script>
        /*         页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，
                                并且单击新增的美女背景也会变为红色，具体表现如下图： */
        // 获取ul
        let oUl = $("ul")[0];
        let btn = $("button")[0];
        // 美女数值
        let data_arr = ['世悦', '艳蓉', '丹洁', '玲娇', '卓妍', '杭英', '玲丽', '婷雯', '梓悦', '秀娟',
            '梓婧', '雯婧', '瑶华', '翠玲', '锦婷', '永茹', '红琼', '睿颖', '炜琳', '雨莹', '炜婷', '丽英',
            '忠燕', '瑞芬', '馨婷', '连英', '秀媛', '雨花', '秀珊', '欣怡', '思艳', '紫颖', '芬璇'
        ];
        // console.log(data_arr.length);
        //  列表的索引
        let index = 0;
        oUl.addEventListener('click', function(ev) {
            // 排他
            let olis = oUl.querySelectorAll("li");
            // console.log(Array.isArray(olis));
            for (let i = 0; i < olis.length; i++) {
                olis[i].style.background = "";
            }
            // 判断点击对象是否是li
            if (ev.target.nodeName == "LI") {
                ev.target.style.background = "red";
            }

        });
        btn.addEventListener('click', function() {
            let li = document.createElement("li");
            // console.log(index % (data_arr.length));
            li.innerHTML = data_arr[index % (data_arr.length)];

            oUl.insertBefore(li, oUl.children[0]);
            index++;
        });



        function addEventListener(element, eventName, fn) {
            if (element.addEventListener) {
                element.addEventListener(eventName, fn);
            } else if (element.attachEvent) {
                element.attachEvent("on" + eventName, fn);
            } else {
                // 相当于element.onclick = fn;
                element['on' + eventName] = f(n);
            }
        }

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>